<template>
  <el-dialog v-model="visible" :show-close="true" width="800">
    <div class="content">
      <UserPolicyView v-if="type == 'user'"/>
      <DutyPolicyView v-if="type == 'duty'"/>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from 'vue';
import UserPolicyView from '/@/views/UserPolicyView.vue'
import DutyPolicyView from '/@/views/DutyPolicyView.vue'

export default defineComponent({
  name: 'LoginPage',
  components: {UserPolicyView, DutyPolicyView},
  setup() {
    const visible = ref(false);
    const state = reactive({
      type: 'user'
    });
    const openDialog = (_type: string) => {
      visible.value = true;
      state.type = _type
    };
    return {
      visible,
      openDialog,
      ...toRefs(state)
    }
  }
})
</script>

<style scoped lang="scss">
.content {
  height: 70vh;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
